import "./index.scss";
import { useMemo, useState } from "react";
// 导入中英文转换对应组件
import { billTypeToName } from "../../../../contantt/index";
// 导入图标组件
import Icon from "../../../../components/icons/index";
// 导入声明文件
import type { BillType } from "../../../../types/billType";

const DailyBill = ({
  billDate,
  billList,
}: {
  billDate: string;
  billList: BillType[];
}) => {
  // 计算支出、收入、结余
  const dayResult = useMemo(() => {
    const pay = billList
      .filter((item) => item.type === "pay")
      .reduce((a, c) => a + c.money, 0);
    const income = billList
      .filter((item) => item.type === "income")
      .reduce((a, c) => a + c.money, 0);
    return {
      pay,
      income,
      total: pay + income,
    };
  }, [billList]);

  // 控制展开与隐藏功能
  const [isVisible, setIsVisible] = useState(false);
  return (
    <div className="dailyBill">
      <div className="header">
        <div className="dateIcon">
          <span className="date">{billDate}</span>
          <span
            className={isVisible ? "arrow expand" : "arrow"}
            onClick={() => setIsVisible(!isVisible)}
          ></span>
        </div>
        <div className="oneLineOverview">
          <div className="pay">
            <span className="type">支出</span>
            <span className="money">{dayResult.pay.toFixed(2)}</span>
          </div>
          <div className="income">
            <span className="type">收入</span>
            <span className="money">{dayResult.income.toFixed(2)}</span>
          </div>
          <div className="balance">
            <span className="money">{dayResult.total.toFixed(2)}</span>
            <span className="type">结余</span>
          </div>
        </div>
      </div>
      {/* 单日列表 */}
      <div
        className="billList"
        style={{ display: isVisible ? "block" : "none" }}
      >
        {billList.map((item) => {
          return (
            <div className="bill" key={item.id}>
              {/* 渲染图标 */}
              <Icon type={item.useFor} />
              <div className="detail">
                <div className="billType">{billTypeToName[item.useFor]}</div>
              </div>
              <div className={`money ${item.type}`}>
                {item.money.toFixed(2)}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};
export default DailyBill;
